<template>
  <div>
    <div class="login">
      <div class="login-text-box">
        <el-form
          :model="data"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="账号" prop="phone">
            <el-input v-model="data.phone"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input v-model="data.password"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div class="text-box">
        <span style="margin-right: 2vw;">登录或完成注册即代表你同意 用户协议 和 隐私政策</span>
        <el-switch v-model="choose"
        active-text="管理员端"></el-switch>
      </div>

      <div class="login-btn-box">
        <el-button @click="toRegister">前往注册</el-button>
        <el-button @click="loginClick">点击登录</el-button>
      </div>

      <div class="img-box">
        <div class="img-22-open imgs" ref="img22"></div>
        <div class="img-33-open imgs" ref="img33"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions} from "vuex";
export default {
  data() {
    return {
      data: {
        phone: "",
        password: "",
      },
      choose:false,
      
      rules: {
        phone: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (
                /^1(3[0-9]|4[57]|5[0-35-9]|7[0678]|8[0-9])\d{8}$/.test(value) ==
                false
              ) {
                callback(new Error("请输入正确的号码"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
          {
            validator: function (rule, value, callback) {
              if (
                /^[a-zA-Z0-9_-]{6,10}$/.test(
                  value
                ) == false
              ) {
                callback(
                  new Error("密码应为6-10位字符")
                );
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    ...mapActions(["login"]),
   
    async loginClick(){
      var url = this.choose? '/admins/login':'/user/login'
      this.$emit("login" ,await this.login({
        url:url,
        body:this.data
      }))   
    },
    async toRegister(){
      this.$emit("register")   
    }
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  background-color: white;
}

.login-text-box {
  width: 80%;
  margin-top: 4vh;
}
.text-box {
  text-align: center;
  color: rgb(85, 78, 79);
}

.login-btn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2vh;
}

.img-box {
  width: 100%;
  height: 10vw;
  .imgs {
    float: left;
    width: 20%;
    height: 80%;
    margin-top: 1.8vw;
  }
  .img-22-open {
    background: url("/images/22_open.72c00877.png") no-repeat center center;
    background-size: cover;
  }
  .img-22-close {
    background: url("/images/22_close.0efad8c4.png") no-repeat center center;
    background-size: cover;
  }
  .img-33-open {
    background: url("/images/33_open.43a09438.png") no-repeat center center;
    background-size: cover;
    position: relative;
    left: 26.8vw;
  }
  .img-33-close {
    background: url("/images/33_close.eea03c39.png") no-repeat center center;
    background-size: cover;
  }
}
</style>